<!DOCTYPE html>
<html>
<head>
    <title>jquery.slideit.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="target-densitydpi=device-dpi,width=640, user-scalable=0" id="viewport">
    <script src='jquery.min.js'></script>
    <script src='jquery.slideit.js'></script>
    <link rel="stylesheet" href="jquery.slideit.css">
    <style>
        html,body{
            padding: 0;
            margin: 0;
        }
        .red{
            background-color: red;
        }
        .grey{
            background-color: #ccc;
        }
        .green{
            background-color: green;
        }
        .yellow{
            background-color: yellow;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="slideit">
        <section class='red'></section>
        <section class='grey'></section>
        <section class='blue'></section>
        <section class='yellow'></section>
        <section class='green'></section>
    </div>
</body>
<script>
    $('#slideit').slideit({
        range:100,
        time:500
    });
</script>
</html>